<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="10">
        <inCom style="width: 600px; height: 500px" />
      </el-col>
      <div style="width: 40px"></div>
      <el-col :span="10">
        <div
          id="brokenLine"
          style="height: 500px; width: 700px; margin-left: 50px"
        ></div>
      </el-col>
    </el-row>
    <div style="height: 20px"></div>
    <el-row :gutter="400">
      <el-col :span="6">
        <div id="bar" style="height: 400px; width: 500px"></div>
      </el-col>
      <!-- <div style="width: 40px"></div> -->
      <el-col :span="4">
        <div id="pie" style="height: 350px; width: 500px"></div>
      </el-col>
      <el-col :span="6">
        <div
          id="radar"
          style="height: 300px; width: 400px; margin-left: 20px"
        ></div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getProvinceApi } from "@/api/dashboard.js";
import inCom from "@/components/inCom/index.vue";

import * as echarts from "echarts";
// ========
// 数据
const defaultData = {
  week: [],
  sidebar: [],
};
const brokData = ref({ ...defaultData });
// 获取数据
const initData = async () => {
  let res = await getProvinceApi();
  console.log(res);
  brokData.value = res.data.data;
};

// 线图
const brokenLine = async () => {
  var chartDom = document.getElementById("brokenLine");
  var myChart = echarts.init(chartDom);
  let option = {
    title: {
      text: "折线分布",
      left: "center",

      textStyle: {
        fontSize: 30,
      },
    },
    xAxis: {
      type: "category",
      data: [],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [],
        type: "line",
      },
    ],
  };
  option.xAxis.data = brokData.value.map((item) => item.name);
  option.series[0].data = brokData.value.map((item) => item.value);
  option && myChart.setOption(option);
};
// 柱图
const bar = () => {
  var chartDom = document.getElementById("bar");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: "柱状分布",
      left: "center",

      textStyle: {
        fontSize: 30,
      },
    },
    xAxis: {
      type: "category",
      data: [],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [],
        type: "bar",
      },
    ],
  };
  option.xAxis.data = brokData.value.map((item) => item.name);
  option.series[0].data = brokData.value.map((item) => item.value);
  option && myChart.setOption(option);
};
// 饼图
const pie = () => {
  var chartDom = document.getElementById("pie");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: "饼图分布",
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },

    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: [],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: "rgba(0, 0, 0, 0.5)",
          },
        },
      },
    ],
  };
  option.series[0].data = brokData.value;
  option && myChart.setOption(option);
};
// 雷达图
const redar = () => {
  var chartDom = document.getElementById("radar");
  var myChart = echarts.init(chartDom);
  var option;

  option = {
    title: {
      text: "雷达分布",
    },

    radar: {
      // shape: 'circle',
      indicator: [
        { name: "Sales", max: 1000 },
        { name: "Administration", max: 1000 },
        { name: "Information Technology", max: 1000 },
        { name: "Customer Support", max: 1000 },
        { name: "Development", max: 1000 },
        { name: "Marketing", max: 1000 },
      ],
    },
    series: [
      {
        name: "Budget vs spending",
        type: "radar",
        data: [
          {
            value: [],
            name: "Allocated",
          },
        ],
      },
    ],
  };

  option.series[0].data[0] = brokData.value.map((item) => item.value);
  option.series[0].data[1] = brokData.value.map((item) => item.value1);
  const indicatorList = brokData.value.map((item) => {
    return {
      name: item.name,
      max: 1000,
    };
  });
  option.radar.indicator = indicatorList;
  option && myChart.setOption(option);
};

onMounted(async () => {
  initData();
  setTimeout(() => {
    bar();
    brokenLine();
    pie();
    redar();
  }, 300);
});
</script>

<style scoped></style>
